import { practiceListApi } from "@/http/api"
import { useEffect, useState } from "react"
import { useLocation } from "react-router-dom"
import Fill from "./components/Fill"
import Options from "./components/Options"
import "./practice.less"
import { Swiper } from 'antd-mobile'

const OptionsTypes = ['one', 'many', 'check'];

export default function Practice() {
    const { state } = useLocation()
    const [data, setData] = useState<PracticeData[]>([])
    useEffect(() => {
        practiceListApi(state).then(res => {
            if (res?.errCode == 0) {
                setData(res.data);
            }
        })
    }, [])
    return <>
        <Swiper>
            {
                data.map(item => <Swiper.Item key={item.id}>
                    {
                        OptionsTypes.includes(item.questionType) ? <Options data={item} /> : <Fill data={item} />
                    }
                </Swiper.Item>)
            }
        </Swiper>

    </>
}